<template>
<div id="calendarDiv">
  <el-calendar style="height: 100%;">
    <template slot="dateCell"
              slot-scope="{data}">
      <!-- 自定义日期单元格内容，绑定点击事件 -->
      <div @click="handleDateClick(data.day)" style="height: 100%; position: relative">
        {{ data.day.split('-').slice(2).join('-') }}
        <i v-show="todoFlags[data.day]" class="el-icon-message-solid" style="position: absolute; bottom: 5px; left: 2px; color: red" >
        </i>
      </div>
    </template>
  </el-calendar>
</div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "TodoCalendar",
  data(){
    return{
      todoFlags: {
        '2025-05-01': true,
        '2025-05-02': false,
        '2025-05-03': true,
      }
    }
  },
  mounted() {
    this.loadTodoFlag();
  },
  methods:{
    handleDateClick(date) {
      this.$store.dispatch('updateTodoDate', date);
    },
    loadTodoFlag(){
      const self = this;
      request({
        url: '/todo/getMonthTodoFlag',
        method: 'get',
        params: {
          month: '2025-05'
        }
      }).then(response => {
        if (response && response.data) {
          self.todoFlags = response.data;
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    }
  }
}
</script>

<style scoped>
</style>